<template>
  <view class="notice-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 公告列表 -->
    <scroll-view class="notice-list" scroll-y>
      <view 
        class="notice-item" 
        v-for="(notice, index) in notices" 
        :key="index"
        @tap="viewNoticeDetail(notice)"
      >
        <view class="notice-title">{{ notice.title }}</view>
        <view class="notice-date">{{ notice.createTime }}</view>
        <view class="right-arrow">
          <text class="iconfont icon-right"></text>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="notices.length === 0">
        <image src="/static/empty.png" mode="aspectFit"></image>
        <text>暂无公告</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
  components: {
    NavBar
  },
  data() {
    return {
      notices: []
    }
  },

  onLoad() {
    this.loadNotices()
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 加载公告列表
    async loadNotices() {
      try {
        const res = await uni.request({
          url: `${uni.$config.baseUrl}/system/notice/listAll`,
          method: 'GET'
        })

        if (res.data.code === 200) {
          this.notices = res.data.rows.map(notice => ({
            id: notice.noticeId,
            title: notice.noticeTitle,
            content: notice.noticeContent,
            createTime: this.formatDate(notice.createTime)
          }))
        } else {
          throw new Error(res.data.msg || '获取公告失败')
        }
      } catch (err) {
        console.error('获取公告列表失败:', err)
        uni.showToast({
          title: '获取公告列表失败',
          icon: 'none'
        })
      }
    },

    // 查看公告详情
    viewNoticeDetail(notice) {
      uni.navigateTo({
        url: `/pages/technician/notice-detail?id=${notice.id}`
      })
    },

    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style lang="scss" scoped>
.notice-container {
  min-height: 100vh;
  background: #F5F5F5;
  
  .nav-bar {
    position: fixed;
    top: 40rpx;
    left: 0;
    right: 0;
    height: 0rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    z-index: 100;
    
    .left-icon {
      padding: 20rpx;
      margin-left: -20rpx;
      
      .icon-back {
        font-size: 40rpx;
        color: #333333;
      }
    }
    
    .title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      margin-right: 56rpx;
    }
  }

  .notice-list {
    padding: 30rpx;
    margin-top: 50rpx;
    .notice-item {
      background: #FFFFFF;
      border-radius: 16rpx;
      padding: 36rpx;
      margin-bottom: 24rpx;
      display: flex;
      flex-direction: column;
      position: relative;
      box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      
      .notice-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        margin-bottom: 16rpx;
        line-height: 1.4;
      }
      
      .notice-date {
        font-size: 28rpx;
        color: #999999;
      }
      
      .right-arrow {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        
        .icon-right {
          font-size: 36rpx;
          color: #2B87FF;
        }
      }
      
      &:active {
        transform: scale(0.98);
        background: #F8F8F8;
      }
    }
    
    .empty-state {
      padding: 200rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      image {
        width: 240rpx;
        height: 240rpx;
        margin-bottom: 30rpx;
      }
      
      text {
        font-size: 32rpx;
        color: #999999;
      }
    }
  }
}
</style> 